<template>
  <div class="xl-index-page">
    <div class="swiper-container xl-swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="xl-heard-bg ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0">
            <img src="../static/img/page1-top-bg.webp" alt="">
          </div>
          <div class="xl-line ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1.2s" swiper-animate-delay="0.5s"></div>
          <div class="xl-text ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.2s" swiper-animate-delay="0.7s">前端开发工程师</div>
          <div class="xl-line xl-line2 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1.2s" swiper-animate-delay="0.6s"></div>
          <div class="xl-head-box ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
            <img src="../static/img/head.png" alt="">
          </div>
          <div class="xl-font1 ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="1.2s">
            <img src="../static/img/page1-font.webp" alt="">
          </div>
          <div class="xl-font2 ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="1.3s">R  E  S  U  M  E</div>
          <vue-typer class="xl-introduce ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.4s" caret-animation='smooth' :text='introduce' :repeat='Infinity'></vue-typer>
          
          <div class="xl-bottom-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.6s">
            <img src="../static/img/page1-bottom.png" alt="">
          </div>
        </div>
        <div class="swiper-slide">
          <img class="xl-info-bg-img ani" src="../static/img/page2-top.webp" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0">
          <div class="xl-info-title">
            <div class="xl-title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.6s">个 人 资 料 / ABOUT ME</div>
            <div class="xl-left-block ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s"></div>
          </div>
          <div class="xl-my-info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.4s" swiper-animate-delay="0.8s">
            <dl v-for="(item, index) in infos" :key="index">
              <dt class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" :swiper-animate-delay="(1+index * 0.2) + 's'">{{item.title}}</dt>
              <dd class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" :swiper-animate-delay="(1.1+index * 0.2) + 's'">{{item.detail}}</dd>
            </dl>
          </div>

          <div class="xl-bottom-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.6s">
            <img src="../static/img/page1-bottom.png" alt="">
          </div>
        </div>
        <div class="swiper-slide">
          <img class="xl-info-bg-img ani" src="../static/img/page2-top.webp" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0">
          <div class="xl-info-title">
            <div class="xl-title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.6s">工 作 经 历 / ABOUT ME</div>
            <div class="xl-left-block ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s"></div>
          </div>
          <div class="xl-my-info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.4s" swiper-animate-delay="0.8s">
            <van-steps direction="vertical" :active="works.length-1" class="xl-steps ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.4s" swiper-animate-delay="1s">
              <van-step v-for="(item, index) in works" :key="index + 200">
                <p class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" :swiper-animate-delay="(1+index * 0.2) + 's'">{{item.time}}</p>
                <p class="ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" :swiper-animate-delay="(1.1+index * 0.2) + 's'">{{item.name}}</p>
              </van-step>
            </van-steps>
          </div>
          
          <div class="xl-bottom-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.6s">
            <img src="../static/img/page1-bottom.png" alt="">
          </div>
        </div>
        <div class="swiper-slide" v-for="(item, index) in projects" :key="index + 100">
          <img class="xl-info-bg-img ani" src="../static/img/page2-top.webp" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0">
          <div class="xl-info-title">
            <div class="xl-title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.6s">项 目 经 历 / ABOUT ME</div>
            <div class="xl-left-block ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s"></div>
          </div>
          <div class="xl-work-info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.4s" swiper-animate-delay="0.8s">
            <img :src="item.imgUrl">
          </div>

          <div class="xl-bottom-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.6s">
            <img src="../static/img/page1-bottom.png" alt="">
          </div>
        </div>
        <div class="swiper-slide">
          <img class="xl-info-bg-img ani" src="../static/img/page2-top.webp" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0">
          <div class="xl-info-title">
            <div class="xl-title ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="1s" swiper-animate-delay="0.6s">联 系 方 式/ ABOUT ME</div>
            <div class="xl-left-block ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s"></div>
          </div>
          <div class="xl-chat-info ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.4s" swiper-animate-delay="0.8s">
            <img class="xl-wechact-img ani" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" swiper-animate-delay="1.2s" src="../static/img/wechat.png">
            <p class="ani" swiper-animate-effect="flipInY" swiper-animate-duration="1s" swiper-animate-delay="2s">扫二维码添加好友</p>
          </div>

          <div class="xl-bottom-bg ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.6s">
            <img src="../static/img/page1-bottom.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <div class="xl-arrow animated infinite delay-3s bounce">
      <img src="" alt="">
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      introduce: ["前端开发工程师","个人网站开发","H5嵌套开发","小程序开发","快应用开发"],
      infos: [
        {title: '姓名：', detail: '刘雪亮'},
        {title: '性别：', detail: '男'},
        {title: '年龄：', detail: '29'},
        {title: '工作经验：', detail: '6年'},
        {title: '毕业院校：', detail: '安徽国防科技职业学院'},
        {title: '专业：', detail: '机械设计制造与自动化'},
        {title: '学历：', detail: '大专'},
        {title: '现住地址：', detail: '上海市浦东新区张江镇'},
        {title: '联系电话：', detail: '18605686275'},
        {title: '联系邮箱：', detail: '745375757@qq.com'},
        {title: '个人网站：', detail: 'liuxueliang.com'},
      ],
      works: [
        {time: '2014年08至2015年11月', name: '安徽众润金融'},
        {time: '2015年11月至2016年10月', name: '安徽索兑软件'},
        {time: '2016年11月至2017年07月', name: '上海和晰金融'},
        {time: '2017年09月至今', name: '中原集团'},
      ],
      projects: [
        {
          name: '我的网站',
          imgUrl: '/img/我的网站.jpg'
        },
        {
          name: '房友圈官网',
          imgUrl: '/img/房友圈官网.jpg'
        },
        {
          name: '房友圈H5',
          imgUrl: '/img/房友圈H5.jpg'
        },
        {
          name: '房友圈经纪人小程序',
          imgUrl: '/img/房友圈经纪人小程序.jpg'
        },
        {
          name: '房友圈客户端小程序',
          imgUrl: '/img/房友圈客户端小程序.jpg'
        },
        {
          name: '用户中心',
          imgUrl: '/img/用户中心.jpg'
        },
        {
          name: '中原找房小程序',
          imgUrl: '/img/中原找房小程序.jpg'
        },
        {
          name: '昱言小程序',
          imgUrl: '/img/昱言小程序.jpg'
        },
      ]
    }
  },
  mounted() {
      this.init()
      console.log(this.$dialog)
    //   this.$dialog.alert({
    //   message: '弹窗内容',
    // });
  },
  methods: {
    init() {
      window.onload = () => {
        var mySwiper = new Swiper('.swiper-container', {
          autoplay: false,
          initialSlide : 0,
          speed: 300,
          direction: 'vertical',
          pagination: {
            el: '.swiper-pagination',
            type: 'progressbar',
          },
          on:{
            slideChange: function(){
              console.log('改变了，activeIndex为'+this.activeIndex);
            },
            init: function(){
              console.log('init')
              swiperAnimateCache(this); //隐藏动画元素 
              swiperAnimate(this); //初始化完成开始动画
            }, 
            slideChangeTransitionEnd: function(){ 
              console.log('slideChangeTransitionEnd')
              swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
              //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
            } 
          },
        })
      }
    },
  },
}
</script>

<style lang="scss" scope>
@import '../assets/css/base';

.xl-index-page {
  max-width: 640px; min-width: 320px; height: 100%; margin: 0 auto; position: relative;
  .xl-swiper {
      width: 100%; height: 100%;
    .swiper-slide {
      background: #1E2639; position: relative;
      .xl-heard-bg {
        width: px2rem(375); height: px2rem(200);
        img {width: 100%; height: 100%;}
      }
      .xl-line {
        width: px2rem(140); height: 2px; background: #FFF; opacity: 0.7;
        position: absolute; top: px2rem(40); left: 50%; margin-left: px2rem(-70);
      }
      .xl-text {
        width: px2rem(140); height: px2rem(20); line-height: px2rem(20); text-align: center;
        font-size: px2rem(14); color: #FFF;
        position: absolute; top: px2rem(45); left: 50%; margin-left: px2rem(-70);
      }
      .xl-line2 {
        top: px2rem(70);
      }
      .xl-head-box {
        position: absolute; left: 50%; top: px2rem(100); margin-left: px2rem(-100);
        width: px2rem(200); height: px2rem(200); background: rgba($color: $xlBlue, $alpha: 0.5);
        padding: px2rem(10); box-sizing: border-box; border-radius: 50%; overflow: hidden;
        img {width: 100%; height: 100%; border-radius: 50%; }
      }
      .xl-font1 {
        width: px2rem(180); height: px2rem(80); position: absolute;
        left: 50%; top: px2rem(300); margin-left: px2rem(-90);
        img {width: 100%; height: 100%; border-radius: 50%; float: left;}
      }
      .xl-font2 {
        width: px2rem(240); height: px2rem(40); line-height: px2rem(40); position: absolute;
        left: 50%; top: px2rem(375); margin-left: px2rem(-120);
        font-size: px2rem(26); color: $xlWhite; text-align: center; 
      }
      .xl-introduce {
        width: 100%; height: px2rem(20); line-height: px2rem(20); position: absolute;
        left: 0; top: px2rem(450);
        font-size: px2rem(16); text-align: center; 
        
        .custom.char.typed {
          color: $xlBlue;
        }
        .custom.char.selected {
          color: $xlWhite;
        }

        .custom.caret {
          animation: rocking 1s ease-in-out 0s infinite;
        }
        .custom.caret.typing {
          background-color: $xlBlue;
        }
        .custom.caret.selecting {
          display: inline-block;
          background-color: $xlWhite;
        }
      }
      .xl-bottom-bg {
        width: px2rem(375); height: px2rem(50); position: absolute; bottom: 0; left: 0;
        img {width: 100%; height: 100%; float: left;}
      }
      .xl-info-bg-img{
        width: 100%; height: px2rem(135);
      }
      .xl-info-title {
        width: 100%; height: px2rem(100); display: flex; align-items: center; flex-direction: row-reverse;
         position: absolute; top: 0; left: 0; z-index: 0;
        .xl-left-block {
          width: px2rem(12); height: px2rem(36); background: $xlBlue2;
        }
        .xl-title {
          width: px2rem(250); height: px2rem(36); line-height: px2rem(36); margin-left: px2rem(8); background: $xlBlue2;
          font-size: px2rem(18); font-weight: 600; text-align: center; color: #FFF;
        }
      }
      .xl-my-info {
        width: px2rem(345); margin-left: px2rem(15); box-sizing: border-box;
        border: 1px solid $xlBlue; padding: px2rem(15);
        font-size: px2rem(14); color: #FFF; line-height: px2rem(30);
        dl {display: flex;}
        .xl-steps {
          background: none;
          .van-step::before {
            background: none;
          }
          .van-step--finish {
            color: #FFF;
          }
        }
        
      }
      .xl-work-info {
        width: px2rem(345); box-sizing: border-box; 
        border: 1px solid $xlBlue; padding: px2rem(15);
        font-size: px2rem(14); color: #FFF; line-height: px2rem(30);
        position: absolute; left: px2rem(15); top: px2rem(150); bottom: px2rem(65);
        img {width: 100%; height: 100%;}
      }
      .xl-chat-info {
        width: px2rem(230); height: px2rem(260); box-sizing: border-box; 
        border: 1px solid $xlBlue; padding: px2rem(15);
        font-size: px2rem(14); color: #FFF; line-height: px2rem(30);
        position: absolute; left: px2rem(70); top: px2rem(150);
        img {
          width: px2rem(200); height: px2rem(200);
        }
        p {
          font-size: px2rem(18); line-height: px2rem(20); color: #FFF; text-align: center;
        }
      }
    }
  }
  .xl-arrow {
    width: px2rem(40); height: px2rem(18); position: absolute; bottom: px2rem(20); left: 50%;
    margin-left: px2rem(-20); z-index: 1000;
    animation-duration: 2s;
    img {width: 100%; height: 100%; float: left;}
  }
  .swiper-pagination {
    position: absolute; right: 0; top: 0;
    width: px2rem(2); height: 100%;
  }
}
</style>
